import { Component } from 'react'
import { Provider } from 'mobx-react'
import { View, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'

import destinationsStore from './store/destinations'

import './app.less'

const store = {

  destinationsStore
}

// 底部导航栏组件
class TabBar extends Component {
  constructor(props) {
    super(props)
    this.state = {
      current: 0
    }
  }

  switchTab = (index, url) => {
    this.setState({ current: index })
    Taro.switchTab({ url })
  }

  handleAddDestination = () => {
    Taro.navigateTo({
      url: '/pages/destinations/add/index'
    })
  }

  render() {
    const { current } = this.state
    return (
      <View className='tab-bar'>
        <View 
          className={`tab-item ${current === 0 ? 'active' : ''}`}
          onClick={() => this.switchTab(0, '/pages/index/index')}
        >
          <View className='tab-icon'>🏠</View>
          <View className='tab-text'>首页</View>
        </View>
        
        <View className='tab-item' onClick={this.handleAddDestination}>
          <View className='add-button'>
            <View className='camera-icon'>📷</View>
          </View>
        </View>
        
        <View 
          className={`tab-item ${current === 1 ? 'active' : ''}`}
          onClick={() => this.switchTab(1, '/pages/destinations/index')}
        >
          <View className='tab-icon'>🗺️</View>
          <View className='tab-text'>目的地</View>
        </View>
      </View>
    )
  }
}

class App extends Component {
  componentDidMount () {}

  componentDidShow () {}

  componentDidHide () {}

  // this.props.children 就是要渲染的页面
  render () {
    return (
      <Provider store={store}>
        <View className='page-with-tabbar'>
          {this.props.children}
        </View>
        <TabBar />
      </Provider>
    )
  }
}

export default App
